<template>
  <el-dialog
    v-model="dialogVisible" append-to-body title="数据源编辑" destroy-on-close
    @open="evDlgOpen"
  >
    <div style="height:400px">
      <div class="qyui-cell col qyui-container">

        <div class="qyui-cell" style="width:300px">
          <ul class="qyui-ul">
            <template v-for="item in procedureList" :key="item.ID">
              <li :class="{'current':procedureName ===item.NAME}" @click="handleSelect(item)">{{ item.NAME }}</li>
            </template>
          </ul>
        </div>

        <div class="qyui-cell" style="width:300px">
          <div class="qyui-cell row pd4">
            <div class="qyui-card">
              <div class="qyui-card-title">存储过程参数</div>
              <div class="qyui-card-body">
                <ul class="qyui-ul">
                  <template v-for="item in dataSoruceParameters" :key="item.ParamName">
                    <li>{{ item.ParamName }}</li>
                  </template>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <div class="qyui-cell row pd4">
          <div class="qyui-card ">
            <div class="qyui-card-title">数据集</div>
            <div class="qyui-card-body">
              <div class="qyui-cell row qyui-container">

                <el-tree
                  :data="treeData"
                  default-expand-all
                  node-key="id"
                  :expand-on-click-node="false"
                  highlight-current
                >
                </el-tree>
              </div>
            </div>
          </div>

        </div>

      </div>
    </div>

    <template #footer>
      <div style="text-align:center">
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { queryProcedureFromDb, queryProcedureInfo, SaveRDLDataSource } from '@/apis/report.js';
import dialogMixin from '@/mixins/dialogMixin.js';
export default {
  mixins: [dialogMixin],
  inject: ['manager'],
  data: function () {
    return {
      procedureName: this.manager.procedureName,
      procedureList: [],
      dataSoruceParameters: [],
      allDataSets: [],
    };
  },
  computed: {
    treeData() {
      const list = [];
      this.allDataSets.forEach(item => {
        const children = [];
        item.Fields.forEach(field => {
          children.push({ id: field.Name, type: 'field', label: field.Name });
        });
        list.push({ id: item.Name, label: item.Name, type: 'table', children: children });
      });
      return list;
    },
  },
  mounted() {
    this.queryProcedureFromDb();
  },
  methods: {
    async queryProcedureFromDb() {
      const res = await queryProcedureFromDb();
      this.procedureList = res.list;
    },
    async queryProcedureInfo() {
      const res = await queryProcedureInfo({ name: this.procedureName });
      this.dataSoruceParameters = res.dataSoruceParameters;
      this.allDataSets = res.list;
    },
    handleSelect(item) {
      this.procedureName = item.NAME;
      this.queryProcedureInfo();
    },
    handleClose() {
      this.dialogVisible = false;
    },
    async handleSave() {
      const res = await SaveRDLDataSource(
        {
          reportId: this.manager.reportId,
          procedureName: this.procedureName,
          dataSoruceParameters: this.dataSoruceParameters,
          allDataSets: this.allDataSets,
        },
      );
      if (res.Code === 'S') {
        this.manager.procedureName = this.procedureName;
        this.manager.allDataSets = this.allDataSets;
        this.manager.dataSoruceParameters = this.dataSoruceParameters;
        this.dialogVisible = false;
      } else {
        this.$message({
          type: 'error',
          message: res.Message,
        });
      }
    },
    evDlgOpen() {
      this.allDataSets = this.manager.allDataSets;
      this.dataSoruceParameters = this.manager.dataSoruceParameters;
      if (this.manager.allDataSets.length > 0) {
        this.procedureName = this.manager.allDataSets[0].SQLString;
      }
    },
  },
};
</script>

<style>
</style>
